<!--  -->
<template>
  <div class="settingBox">
    <div class="setList">
      <div class="title">
        <i class="ticon el-icon-s-operation"></i>
        <span>点单平台设置</span>
      </div>
      <div class="selectSetBox">
        <div class="left">
          <div class="title">点单平台选项配置</div>
          <ul class="selectList">
            <li class="item" v-for="(v,i) in platformData" :key="i">
              <div class="name">{{v.sourceName}}</div>
              <div class="delete el-icon-error" @click="remove(v.id)"></div>
            </li>
          </ul>
          <div class="inputBox" v-if="isAdd">
            <el-input class="input" v-model="addNewName" placeholder="请输入平台名称"></el-input>
            <span class="saveBtn" @click="saveInfo">保存</span>
            <span class="cancelBtn" @click="cancelInfo">取消</span>
          </div>
          <div class="newAdd" @click="newAdd">新增</div>
        </div>
        <div class="right">
          <div class="title">支持选择自营店SKU报备</div>
          <div class="selfShop">
            <ul class="selfSkuList" v-if="selfData.length!=0">
              <li class="item" v-for="(self,i) in selfData" :key="i">
                <div class="name">{{self.shopName}}</div>
                <div class="selfId">{{self.shopId}}</div>
                <div class="delete el-icon-error"></div>
              </li>
            </ul>
            <div class="chooseBox" v-if="selfAdd">
              <el-select v-model="shopName" placeholder="请选择">
                <el-option
                  v-for="(item,i) in platformData"
                  :key="i"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-input v-model="shopId" placeholder="请输入该自营店ID"></el-input>
              <div class="selfSave" @click="selfSave">保存</div>
              <div class="selfCancel" @click="selfCancel">取消</div>
            </div>

            <div class="newAdd" @click="selfSkuAdd">新增</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name: 'OSSFunction',
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      isAdd: false, //平台是否新增
      addNewName: '',
      // 点单平台数据
      platformData: [],
      // 自营店 sku报备
      selfAdd: false, //自营店报备是否新增
      selfData: [],
      shopName: '', //选中的平台
      shopId: '' //自营店id
    }
  },

  mounted() {
    this.queryPurchasePlatformInfo()
  },
  //方法集合
  methods: {
    // 查询全部点单平台
    queryPurchasePlatformInfo() {
      this.$axios
        .get('/api/manage/purchase/queryPurchasePlatformInfo')
        .then(res => {
          res.success ? (this.platformData = res.result) : this.platformData
        })
    },
    // 平台-新增
    newAdd() {
      this.isAdd = true
    },
    // 平台新增保存
    saveInfo() {
      let isExist = this.isRenamed(this.addNewName)
      if (this.addNewName != '') {
        if (isExist) {
          this.$axios
            .post(
              '/api/manage/purchase/addPurchasePlatformInfo?sourceName=' +
                this.addNewName
            )
            .then(res => {
              if (res.success) {
                this.queryPurchasePlatformInfo()
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.isAdd = false
                this.addNewName = ''
              }
            })
        } else {
          this.$alert('该平台已存在,请重新输入')
        }
      } else {
        this.$alert('请输入平台名称')
      }
    },
    // 取消平台新增
    cancelInfo() {
      this.isAdd = false
    },
    //删除平台
    remove(id) {
      const _this = this
      _this
        .$confirm('确定删除该信息吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          _this.$axios
            .post('/api/manage/purchase/deletePurchasePlatformInfo?id=' + id)
            .then(res => {
              if (res.success) {
                _this.$message({
                  message: '删除成功',
                  type: 'success'
                })
                _this.queryPurchasePlatformInfo()
              }
            })
        })
        .catch(() => {})
    },
    // 自营店报备新增
    selfSkuAdd() {
      this.selfAdd = true
    },
    //删除自营店新增信息
    // 保存自营店sku新增
    selfSave() {
      if (this.shopName != '' && this.shopId != '') {
        let self = new Object()
        self.shopName = shopName
        self.shopId = shopId
        this.selfData.push(self)
        this.$message({
          message: '添加成功',
          type: 'success'
        })
        this.isAdd = false
      } else {
        this.$alert('请输入完成信息')
      }
    },
    // 取消自营店sku新增
    selfCancel() {
      this.selfAdd = false
    },
    // 验证新增平台是否重名
    isRenamed(str) {
      const _this = this
      let exist = true
      if (!str) {
        return
      }
      let plate = this.platformData
      for (let item in plate) {
        if (plate[item].sourceName == str) {
          exist = false
          return exist
        } 
      }
      return  exist
    }
  }
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
@themeColor:#298DF8;
.settingBox {
  .setList {
    width: 80%;
    max-height: 600px;
    margin: 0 auto;
    border: 1px solid #bbb;
    .title {
      display: flex;
      align-items: center;
      padding: 16px 30px;
      font-size: 14px;
      font-weight: bold;
      background: #f3f3f3;
      border-bottom: 1px solid #bbb;
      .ticon {
        font-weight: bold;
        font-size: 16px;
        margin-right: 8px;
      }
    }
    .selectSetBox {
      width: 100%;
      display: flex;
      .newAdd {
        width: 235px;
        height: 38px;
        margin: 20px auto;
        line-height: 38px;
        background-color: rgba(255, 255, 255, 0);
        color: rgba(16, 16, 16, 1);
        // font-size: 14px;
        text-align: center;
        font-family: Roboto;
        border: 1px dotted rgba(187, 187, 187, 1);
        cursor: pointer;
      }
      .left {
        flex: 2;
        border-right: 1px solid #bbb;
        .title {
          justify-content: center;
        }
        .selectList {
          padding: 0 15%;
          max-height: 380px;
          overflow-y: auto;
          .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            .name {
              width: 180px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .delete {
              font-size: 14px;
              color: #bbb;
              cursor: pointer;
            }
          }
        }
        .inputBox {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 10px;
          .input {
            width: 45%;
            /deep/ .el-input__inner {
              border-color: @themeColor;
            }
          }
          span {
            margin-left: 12px;
            color: @themeColor;
            cursor: pointer;
          }
        }
      }
      .right {
        flex: 4;
        .title {
          justify-content: center;
        }
        .selfShop {
          padding: 0 10%;
          .selfSkuList {
            .item {
              display: flex;
              align-items: center;
              justify-content: center;
              margin-top: 15px;
              div {
                flex: auto;
                font-size: 14px;
              }
              .selfId {
                text-align: center;
              }
              .delete {
                color: #bbb;
                text-align: center;
                cursor: pointer;
              }
            }
          }
          .chooseBox {
            display: flex;
            align-items: center;
            margin-top: 20px;
            /deep/ .el-select,
            /deep/ .el-input {
              width: 180px;
              margin-right: 20px;
            }
            /deep/ .el-input__inner {
              border-color: @themeColor;
              color: #101010;
            }
            .selfSave,
            .selfCancel {
              font-size: 14px;
              color: @themeColor;
              margin-left: 12px;
              cursor: pointer;
            }
            .selfSave {
              margin-left: 0;
            }
          }

          .newAdd {
            width: 88%;
            margin: 20px 0;
          }
        }
      }
    }
  }
}
</style>